<template>
    <view class="repair-inquiry">
        <up-sticky>
            <image type="image" src="http://www.weijiashangejiance.com/image.png" alt="" class="top-img"
                mode="widthFix" />
        </up-sticky>


        <scroll-vie scroll-y="true" class="scroll-container" v-if="list.length">
            <view v-for="item, index in list" :key="index" class="record-item">
                <view class="record-title">{{ item.name }}</view>
                <image type="image" :src="'http://www.weijiashangejiance.com' + item.url" alt="" mode="widthFix"
                    @click="previewImg(item.url)" />
            </view>
        </scroll-vie>
        <Empty v-else></Empty>
    </view>
</template>

<script>
import {
    getListWJZB
} from '@/api/app.js'
import Empty from '@/components/empty/index.vue'
export default {
    components: {
        Empty
    },
    data() {
        return {
            list: []
        }
    },
    onLoad(opt) {
        if (opt.id) {
            this.getListWJZB(opt.id)
        }
    },
    onReady() {
    },
    methods: {
        previewImg(url) {
            const urlImg = [`http://www.weijiashangejiance.com${url}`]
            uni.previewImage({
                urls: urlImg
            })
        },
        async getListWJZB(id) {
            const res = await getListWJZB({
                id
            })
            this.list = res.data
        },
    }
}
</script>

<style lang="scss" scoped>
.repair-inquiry {
    .top-img {
        height: auto;
        width: 100%;
    }

    .record-item {
        text-align: center;
    }

    .scroll-container {
        height: calc(100vh - 280rpx);
        width: 100%;
    }


    .top-text {
        width: 100%;
        text-align: center;
        font-size: 32rpx;
        color: #409eff;
        font-weight: bold;
        padding: 20rpx 0;
    }

    .record-title {
        text-align: center;
        margin-bottom: 10rpx;
        font-size: 28rpx;
        font-weight: bold;
    }
}
</style>